<template>
  <!-- 运营管理-官网统计 -->
  <div class="officialwebsite_statistics">
    <div class="content-main">
		<div class="box-top">
			<!-- <el-select class="templateSelect" v-model="template.value" placeholder="选择模板">
				<el-option
					v-for="item in template.options"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				</el-option>
			</el-select>
			<el-input class="schoolNameInput" v-model="schoolName" suffix-icon="el-icon-search" placeholder="输入校区名称"></el-input> -->
			<el-radio-group class="timeSelect" v-model="timeControl.radio" size="medium"  @change="workTableChangeTime">
				<el-radio-button label="今日"></el-radio-button>
				<el-radio-button label="近7天"></el-radio-button>
				<el-radio-button label="本月"></el-radio-button>
				<el-radio-button label="一年"></el-radio-button>
				<el-radio-button label="自定义" ref="selfBtn"></el-radio-button>
			</el-radio-group>
			<el-date-picker
				class="datepicker"
				v-model="timeControl.selfTime" @change="updateSelfTime"
				type="datetimerange"
				ref="selfTime"
				range-separator="至"
				start-placeholder="开始日期" 
				end-placeholder="结束日期"
				:default-time="['00:00:00', '23:59:59']">
			</el-date-picker>
		</div>
		<div class="box-bottom">
			<el-table
				ref="statisticsTable"
				:data="statisticsTable"
				stripe
				style="'width: 100%;"
				class="statisticsTable"
				>
				<!-- <el-table-column
				v-if="roleMode===1"
				prop="index"
				align="center"
				label="排序">
				</el-table-column> -->
				<el-table-column
				prop="viewDate"
				align="center"
				label="时间">
				</el-table-column>
				<!-- <el-table-column
				v-if="roleMode===1"
				prop="schoolName"
				align="center"
				label="校区名称">
				</el-table-column> -->
				<el-table-column
				prop="templateApplyName"
				align="center"
				label="官网模板">
				</el-table-column>
				<!-- <el-table-column
				v-if="roleMode===1"
				prop="useTime"
				align="center"
				label="使用时间">
				</el-table-column> -->
				<el-table-column
				prop="viewCount"
				align="center"
				sortable
				label="访问次数">
				</el-table-column>
				<el-table-column
				prop="visitorCount"
				align="center"
				sortable
				label="访问人数">
				</el-table-column>
				<el-table-column
				prop="reservationCount"
				align="center"
				sortable
				label="预约人数">
				</el-table-column>

				<!-- <el-table-column
				v-if="roleMode===1"
				prop="query"
				align="center"
				label="操作">
				<template slot-scope="scope">
					<el-button  @click="statisticsTableRowClick(scope.row)" type="text" size="medium">查看</el-button>
				</template>
				</el-table-column> -->

			</el-table>
			<el-pagination
				class="pagination"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page.sync="searchParam.currPage"
				:page-size="searchParam.pageSize"
				:page-sizes="[10, 20, 30, 40,50,100]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total">
			</el-pagination>
		</div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
		/**选择末班下拉 */
		template:{
			options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			value: ''
		},
		schoolName:'',
		timeControl:{
			radio:'今日',
			pre_radio:'今日',
			selfTime:[new Date(), new Date()],
		},
		statisticsTable: [],
		/**分页 */
		pagination:{
			tableCurrentPage:1,
			pagesize:10,
			total:0
		},
		/**用户角色 */
		roleMode:1,
		/**搜索参数 */
		searchParam:{
			currPage:1,
			pageSize:10,
			campusId:this.$store.state.campusId,
			startDate:'',
			endDate:''
		}
    };
  },
  methods: {
	init(){
		// let user=JSON.parse(tool.getItem(window.lsKey.user));
		// this.roleMode=user.roleMode;
		// console.log(user);

		this.workTableChangeTime('今日');
	},
	campusChange : function(campusId) { //校区改变
		this.searchParam.campusId=campusId;
		this.init();
	},
	/**切换时间 */
	workTableChangeTime(d){
		//自定义时间选取
		// console.log(d)
		if(d==='自定义'){
			this.$refs.selfTime.focus();
			this.timeControl.radio=this.timeControl.pre_radio;
			return;
		}
		this.timeControl.selfTime=[];
		this.timeControl.pre_radio=d;
		if(d=='今日'){
			let timeobj=tool.getTimeObjByType(1);
			this.searchParam.startDate=timeobj.startTime;
			this.searchParam.endDate=timeobj.endTime;
			this.updateStatisticsTable();
		}
		else if(d=='近7天'){
			let timeobj=tool.getTimeObjByType(21);
			this.searchParam.startDate=timeobj.startTime;
			this.searchParam.endDate=timeobj.endTime;
			this.updateStatisticsTable();
		}
		else if(d=='本月'){
			let timeobj=tool.getTimeObjByType(3);
			this.searchParam.startDate=timeobj.startTime;
			this.searchParam.endDate=timeobj.endTime;
			this.updateStatisticsTable();
		}
		else if(d=='一年'){
			let timeobj=tool.getTimeObjByType(4);
			this.searchParam.startDate=timeobj.startTime;
			this.searchParam.endDate=timeobj.endTime;
			this.updateStatisticsTable();
		}
	},
	/**自定义时间确认选择后 */
	updateSelfTime(d){
		if(!d)return;
		this.timeControl.radio='自定义';
		let start=formateDate(d[0]),end=formateDate(d[1]);
		this.searchParam.startDate=start;
		this.searchParam.endDate=end;
		this.updateStatisticsTable();
		function formateDate(t=new Date()){
			let year=t.getFullYear();
			let month=t.getMonth()+1;
			month=month<10?'0'+month:month;
			let day=t.getDate();
			day=day<10?'0'+day:day;
			let hour=t.getHours();
			hour=hour<10?'0'+hour:hour;
			let minute=t.getMinutes();
			minute=minute<10?'0'+minute:minute;
			let second=t.getSeconds();
			second=second<10?'0'+second:second;
			return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
		}
	},
	/**表格 行查看点击 */
	statisticsTableRowClick(d){
		console.log(d)
	},
	/**表格翻页 */
	handleCurrentChange(val) {
		// console.log(val)
		this.searchParam.currPage=val;
		this.updateStatisticsTable();
	},
	/**切换每页个数 */
	handleSizeChange(val){
		this.searchParam.pageSize=val;
		this.updateStatisticsTable();
	},
	/**更新表格数据 */
	updateStatisticsTable(){
		let self=this;
		api.getWebsiteStatistics(this.searchParam).then(function(d){
			// console.log(d)
			if(d.result=='操作成功'){
				self.statisticsTable=d.list;
				self.pagination.total=d.totalCount;
			}
		});
	}
  },
  mounted() {
	  this.init();
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss">
.officialwebsite_statistics {
  .content-main {
    margin: 0.14rem auto;
    min-width: 15.48rem;
    width: 15.48rem;
    padding: 0.2rem 0.32rem 0.2rem 0.32rem;
    height: auto;
    background: #fff;
    border: 0.01rem solid #ededed;
    border-radius: 0.1rem;
    box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
	color: #333333;
    .box-top{
		text-align: right;
		.templateSelect{

		}
		.schoolNameInput{
			margin-left: 0.2rem;
			width: 3rem;
		}
		.timeSelect{
			// margin-left: 5.6rem;
		}
		.datepicker.el-date-editor{
			position: absolute;
			right: 1.25rem;
			top: 0.65rem;
			width: 0.69rem;
			height: 0.27rem;
			opacity: 0;
			pointer-events: none;
		}
		
		
	}
	.box-bottom{
		.statisticsTable{
			padding: 0.16rem 0;
			font-size: 0.16rem !important;
		}
		.el-table::before{
			background-color: transparent !important;
		}
		.pagination{
			margin-top: 0.16rem;
			// text-align: center;
		}
	}
  }
}
</style>